<template>
  <div>
    <div class="side-menu">
      <ul>
        <li class="side-menu-item">
          <span class="side-menu-item-title">我的世界</span>
          <div class="show side-menu-item-content-1">

          </div>
        </li>
        <li class="side-menu-item">
          <div class="side-menu-item-title">我的世界</div>
          <div class="show side-menu-item-content-2">

          </div>
        </li>
        <li class="side-menu-item">
          <div class="side-menu-item-title">我的世界</div>
          <div class="show side-menu-item-content-3">

          </div>
        </li>
        <li class="side-menu-item fold">
          <div class="side-menu-item-title">折叠菜单</div>
          <div class="submenu">
            <ul>
              <li class="submenu-item"><a href="#">你好</a></li>
              <li class="submenu-item"><a href="#">你好</a></li>
              <li class="submenu-item"><a href="#">你好</a></li>
            </ul>
          </div>
        </li>
        <li class="side-menu-item">
          <div class="side-menu-item-title">我的世界2</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "sideMenu"
      }
    }
  }
</script>

<style scoped>
  .side-menu {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 400px;
    width: 200px;
    box-shadow: 0 4px 8px 4px #bcbcbc;
  }

  .side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .side-menu-item {
    display: block;
    height: 40px;
    width: 100%;
    cursor: pointer;
    position: relative;
    border-bottom: 2px #DCDFE6 solid;
  }

  .side-menu-item-title {
    display: table-cell;
    font-size: 20px;
    padding: 0 20px;
    height: 40px;
    vertical-align: middle;
  }

  .side-menu-item-content-1,.side-menu-item-content-2,.side-menu-item-content-3{
    display: none;
    width: 880px;
    height: 400px;
    position: absolute;
    box-shadow: 0 2px 4px 4px white;
    z-index: 100;
    border: 3px #DCDFE6 solid;
  }
  .side-menu-item-content-1{
    top: 0;
    left:202px;
    background-color: #FFCC99;
  }

  .side-menu-item-content-2{
    top: -42px;
    left:202px;
    background-color: #c96280;
  }
  .side-menu-item-content-3{
    top: -84px;
    left:202px;
    background-color: #2bacc9;
  }

  .side-menu-item:hover{
    background-color: #DCDFE6;
  }
  .show{
    /*transition: width 1s;*/
  }
  .side-menu-item:hover .show{
    display: block;
  }

  .submenu{
    text-align: center;
  }
  .submenu ul,.submenu a{
    display: block;
  }

  .fold{
    height: 100px;
  }

</style>
